<template>
    <div id="quan">
        <div id="qq">
            <div id="aa">
                <span class="fa fa-angle-left" @touchstart="back"></span>
            </div>
            <div id="zz">登录</div>
            <div id="ww">···</div>
        </div>
        <div id="cc">
            <span class="fa fa-user-o pp"></span><input type="text" v-model="username" placeholder="用户名/手机号码" class="mm">
            <br>
            <span class="fa fa-expeditedssl pp"></span><input type="text" v-model="psw" placeholder="密码" class="mm">
            <br>
            <input type="checkbox">
            <span id="bb">三个月内免登陆</span>
        </div>
        <button @touchstart="loginBtn" id="btn">登录</button>
        <div id="fg">
            <div>找回密码</div>
            <div>手机验证码登陆</div>
        </div>
        <router-link to="/user/regist" id="ctn">免费注册</router-link>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                username: '',
                psw: ''
            }
        },
        methods: {
            back: function () {
                history.back();
            },
            loginBtn: function () {
                var logObj = {
                    username: this.username,
                    psw: this.psw
                }
                this.$store.dispatch("requestLogin", logObj)
                    .then(res => {
                        // console.dir(res.data);
                        this.layer.alert(res.data.msg);
                        location.href = '#/';
                    });
            }
        },
    }

</script>

<style scoped>
    #quan {
        background-color: #eee;
        height: 100vh;
    }

    #qq {
        display: flex;
        height: 10vh;
        width: 100vw;
        border-bottom: solid 2px #bbb;
    }

    #aa {
        width: 10vh;
        height: 10vh;
        font-size: 8vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }

    #zz {
        width: 50vh;
        text-align: center;
        line-height: 10vh;
    }

    #ww {
        width: 10vh;
        height: 10vh;
        font-size: 10vh;
        text-align: center;
        line-height: 10vh;
        color: #999;
    }


    #cc {
        text-align: left;
        padding-left: 6vw;
    }

    .pp {
        width: 13vw;
        height: 13vw;
        font-size: 7vw;
        border: solid 1px #ccc;
        border-right: none;
        text-align: center;
        line-height: 13vw;
        margin-top: 10px;
        background-color: white;
        color: #ccc;
    }

    .mm {
        height: 13vw;
        width: 75vw;
        position: relative;
        top: -2px;
        border: solid 1px #ccc;
        color: #aaa;
        padding-left: 10px;
    }

    #bb {
        font-size: 14px;
    }

    #hh input {
        width: 13px;
        height: 13px;
    }

    #btn {
        display: block;
        width: 88vw;
        height: 13vw;
        margin: 8vw 6vw;
        border-radius: 2vw;
        background-color: #F27F40;
        color: white;
        border: none;
        text-align: center;
        font-size: 14px;
        line-height: 13vw;
    }

    #fg {
        width: 88vw;
        margin: -2vw 6vw;
        display: flex;
        padding: 0 10px;
        justify-content: space-between;
        color: #666;
        font-size: 14px;
    }

    #ctn {
        display: block;
        margin: 0;
        width: 88vw;
        height: 13vw;
        margin: 8vw 6vw;
        text-align: center;
        padding: 2vw;
        border-radius: 2vw;
        border: solid 1px #F27F40 !important;
        border: none;
        color: #999;
        font-size: 14px;
        line-height: 8vw;
    }
</style>